<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <h1>{{ msg }}</h1>
    <p>
        在定义组件的时候，有些组件是由多个部分进行构成的。
        例如 Boostrap里面的面板组件。

        https://v3.bootcss.com/components/

    </p>

    <!--v-slot 类似之前学习的 v-bind 属性，v-slot 是用于绑定插槽-->
    <!--v-slot 必须写在 template vuejs内置的组件上面-->
    <i-pannel>
        <template v-slot:header>
            <h2>我们指定了头部插槽</h2>
        </template>
        <template v-slot:content>
            <div slot="content">面板的内容</div>
        </template>
        <template v-slot:footer>
            <div>面板的底部</div>
        </template>
    </i-pannel>

</div>
</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">
    Vue.component('i-pannel', {

        template: `
            <div>
                <slot name="header">
                <div>面板的头部（default）</div>
</slot>
                <slot name="content">默认值</slot>
                <slot name="footer">
                 <div>面板的底部（default）</div>
</slot>
            </div>
        `
    });


    new Vue({
        el: '#app',
        data: {
            msg: '插槽'
        }
    })

</script>

</html>
